<template>
    <div class="all">
        <div class="youlike">
            <h3 class="ht">猜你喜欢</h3>
            <ul>
                <li v-for="(item,index) in likefood" :key="index">
                    <a href="#" class="img">
                    <img  :src="item.src" :alt="item.title">
                    </a>
                    <h3 class="ht">{{item.title}}</h3>
                    <p class="gy" style="display:inline-block">
                        <el-rate  disabled show-score  v-model="item.grade" ></el-rate>
                        <span class="grade">{{item.num}}人评论</span>                  
                    </p>
                    <p class="site">{{item.site}}</p>
                    <p class="price">￥{{item.price}}起</p>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
export default {
    data(){
        return{
            likefood:[{
                src:'//p1.meituan.net/deal/e4e87884fc82b457c05b3a49b64fb17750052.jpg@237w_132h_1e_1c',
                title:'酸奶王国（古城店）',
                grade:'4.5',
                num:'1697',
                site:'东安',
                price:'47.9'
            },{
                src:'//p0.meituan.net/xianfu/dd4a4a5dd570f372c3a929b56d86368c16345.jpg@237w_132h_1e_1c',
                title:'蛋糕心语',
                grade:'4',
                num:'697',
                site:'滦州植物园',
                price:'73.0'

            }

            ]
        }
    }
}
</script>

<style scoped>
ul{
    margin: 0PX;
    padding: 0;
    list-style: none;
}
.all{
    margin-left: 10px;
    /* padding: ; */
}
.youlike{
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding: 16px 20px 0;
    width: 230px;
    box-sizing: border-box;
}
.ht{
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-weight: 500;
}
.img{
    margin:20px 0 5px;
    display: inline-block;
    width: 190px;
}
img{
    width: 100%;
    box-sizing: border-box;
    border-radius:5px ;
}
.grade{
    font-size: 12px;
    color: #999;
    height: 24px;
    line-height: 24px;
    /* margin-left: 10px; */
}
.gy #block{
    font-size:14px;
    height:20px;
    line-height: 1;
    width: 90px;
}
.site{
    font-size: 12px;
    color: #999999;
    width: 100%;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
}
.price{
    color: #FF6600;
    font-size: 14px;
    font-weight:1000
}
</style>